import React from "react";
import {
  setup,
  SchemaForm as MobileSchemaForm,
  createFormActions,
  createVirtualBox,
} from '@alife/gcc-form-antd-mobile';
import { Card } from 'antd';
import PhoneSelect from 'components/formily/components/PhoneSelect';
import NumberPicker from 'components/formily/components/PhoneNumberPicker';
import RangePicker from 'components/formily/components/PhoneRangePicker';
import RadioGroup from '@alife/gcc-form-antd-mobile/es/components/RadioGroup';
import CheckboxGroup from '@alife/gcc-form-antd-mobile/es/components/CheckboxGroup';
import AntDatePicker from 'antd-mobile/es/date-picker';
import List from 'antd-mobile/es/list';
import PhoneUpload from 'components/formily/components/PhoneUpload';
import PhonePersonPicker from 'components/formily/components/PhonePersonPicker';
import styled from 'styled-components'
// import PhoneGrid from 'components/formily/components/PhoneGrid';

import 'antd-mobile/lib/input-item/style/css';
import 'antd-mobile/lib/textarea-item/style/css';
import 'antd-mobile/lib/modal/style/css';
import 'antd-mobile/lib/icon/style/css';
import 'antd-mobile/lib/list/style/css';
import 'antd-mobile/lib/radio/style/css';
import 'antd-mobile/lib/date-picker/style/css';
import 'antd-mobile/lib/toast/style/css';
import 'antd-mobile/lib/button/style/css';
import styles from './PhoneForm.less';

const DatePicker = (props) => {
  const { format } = props;
  let mode = 'date';
  if (format === 'YYYY-MM-DD HH:mm:ss') {
    mode = 'datetime';
  }
  return (
    <div className={styles.datePicker}>
      <AntDatePicker
        {...props}
        mode={mode}
      >
        <List.Item arrow="horizontal" />
      </AntDatePicker>
    </div>
  );
};

createVirtualBox(
  'card',
  styled(({ children, className, ...props }) => {
    return (
      <Card className={className} size="small" {...props}>
        {children}
      </Card>
    )
  })`
    margin-bottom: 10px !important;
  `
)
setup({
  // Select: InputSimpleSelectBlurry,
  Select: PhoneSelect,
  NumberPicker,
  RadioGroup,
  CheckboxGroup,
  DatePicker,
  RangePicker,
  Attachment: PhoneUpload,
  SelectPersonField: PhonePersonPicker,
  // Grid: PhoneGrid,
});

export const actionsMobile = createFormActions();
export default MobileSchemaForm;
